Membuat Tautan atau Link pada HTML

Tutorial HTML; Diperbarui tanggal: 9/09/2025

Tautan HTML atau Hyperlink adalah elemen HTML yang digunakan untuk membuat sebuah link atau jalan pintas pada halaman web yang dapat mengarahkan pengguna ke halaman web atau bagian tertentu dari halaman yang berbeda. Tautan HTML dapat digunakan untuk menghubungkan halaman web yang berbeda atau mengarahkan pengguna ke bagian tertentu dari halaman yang sama. Tautan HTML ditandai dengan tag "a" (link atau anchor) dan di dalam tag tersebut terdapat atribut "href" (Hypertext Reference) yang menunjukkan alamat atau URL dari halaman web atau bagian halaman yang ingin dituju.

Contoh penggunaan:

<a href="https://educhannel.id/">Jangan lupa kunjungi educhanel.id ya</a>

Kode diatas akan menghasilkan dokumen berikut:

Jangan lupa kunjungi educhanel.id ya

 

Atribut target Tautan

Secara default, halaman tertaut akan ditampilkan di jendela browser yang sama pada saat membuka halaman web. Untuk mengubahnya, kita dapat menentukan target lain untuk tautan tersebut.

Atribut target menentukan tempat untuk membuka dokumen tertaut. Atribut yang dapat digunakan yaitu:

_self - Membuka dokumen di jendela/tab yang sama pada saat diklik
_blank - Membuka dokumen di jendela atau tab baru
_parent - Membuka dokumen di bingkai induk
_top - Membuka dokumen di halaman web utama atau halaman awal suatu situs web.

Contoh penggunaan atribut target:

<a href="https://educhannel.id/" target='_blank'>Jangan lupa kunjungi educhanel.id ya</a>

Kode diatas ketika tautan di klik maka browser akan membuka dokumen pada tab baru. 

Jangan lupa kunjungi educhanel.id ya

 

Membuat Link untuk Email

Gunakan mailto: pada atribut href untuk membuat tautan yang akan mengarahkan pengguna untuk mengirimkan email ke target yang telah ditentukan. Contoh:

<a href="mailto:suport@educhannel.id">Kirim email</a>
Kirim email

Mengubah Warna Default Tautan

Secara default, tautan akan ditampilkan pada browser sebagai berikut:

  • Tautan yang belum dikunjungi digarisbawahi dan berwarna biru
  • Tautan yang dikunjungi digarisbawahi dan berwarna ungu
  • Tautan aktif digarisbawahi dan berwarna merah

Kita dapat mengubah warna default dari tautan dengan menggunakan CSS.  Berikut adalah contoh bagaimana mengubah gaya atau style default dari tautan dengan css.

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>

a:link digunakan untuk mengubah style tautan, a:visited digunakan untuk mengubah gaya tautan yang sudah di klik, a:hover digunakan untuk mengubah gaya ketika mouse diatas tautan, dan a:active digunakan untuk mengubah style tautan ketika tautan sedang digunakan oleh pengguna.

Mengubah Gaya Tautan menjadi Seperti Tombol

Selain dapat mengubah warna dan gaya tautan melalui CSS, kita juga dapat mengubah tautan menyerupai sebuah tombol. Contoh:

<style>
a:link, a:visited {
  background-color: green;
  color: white;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor:pointer;
}

a:hover, a:active {
  background-color: blue;
}
</style>

Kode diatas akan menghasilkan tautan dengan tampilan tombol sebagai berikut:

Ini Tautan

Membuat Bookmark dengan Tautan/Link

Dengan menggunakan link kita juga dapat membuat bookmark pada sebuah halam web. Boorkmark pada halaman web diperlukan jika halam web yang kita buat sangat panjang. Bookmark akan memudahkan pengguna untuk menemukan paragraf yang dituju tanpa perlu menscroll halaman secara berulang. Untuk membuat bookmark kita harus menggunakan atribut id pada teks yang dituju selanjutnya gunakan atribut href pada tag <a> dengan di awali tandan #. Contoh:

<h2>Daftar Konten</h2>
<a href="#paragraf1">Paragraf 1</a><br>
<a href="#paragraf2">Paragraf 2</a>


<h2>Isi Konten</h2>
<p id='paragraf1'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus, tellus vel congue sagittis, massa orci viverra tellus, quis aliquam nibh enim in turpis. Vivamus luctus massa velit, at consequat odio malesuada nec. Nullam ultricies sit amet justo eget iaculis. Duis vitae tellus a purus dignissim lacinia.
</p>

<p id='paragraf2'>
Suspendisse interdum eget lorem ut tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque tincidunt magna sit amet nunc vestibulum luctus. Duis feugiat nisi sit amet enim tincidunt sagittis. Sed luctus consectetur lacus, nec rutrum magna tempor id. 
</p>

 Kode diatas akan menghasilkan dokumen web sebagai berikut:

Daftar Konten

Paragraf 1
Paragraf 2

Isi Konten

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus, tellus vel congue sagittis, massa orci viverra tellus, quis aliquam nibh enim in turpis. Vivamus luctus massa velit, at consequat odio malesuada nec. Nullam ultricies sit amet justo eget iaculis. Duis vitae tellus a purus dignissim lacinia.

Suspendisse interdum eget lorem ut tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque tincidunt magna sit amet nunc vestibulum luctus. Duis feugiat nisi sit amet enim tincidunt sagittis. Sed luctus consectetur lacus, nec rutrum magna tempor id.